<template>
    <div id="home">
        <!-- 轮播图组件 -->
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(ban,i) in banners" :key="i">
                <img :src="ban.picUrl" alt="">
            </mt-swipe-item>
        </mt-swipe>
        <!-- 推荐歌曲 -->
        <div class="remd">
            <!-- 推荐歌单 -->
            <div class="remd_songs">
                <h2 class="remd_title">推荐歌单</h2>
                <div class="songs_ul">
                    <a class="songs_li" v-for="(remdS,i) in remdSongs" :key="i" v-if="i<6" @click="toPlaylist(remdS.id)">
                        <div class="sbox_top">
                            <img v-lazy="remdS.picUrl" alt="">
                            <span><i class="iconfont icon-erji"></i> {{playCounts(remdS.playCount)}}</span>
                        </div>
                        <div class="sbox_bottom">{{remdS.name}}</div>
                    </a>
                </div>
            </div>
            <!-- 最新音乐 -->
            <div class="remd_news">
                <h2 class="remd_title">最新音乐</h2>
                <div class="remd_newsg">
                    <a class="news_box" v-for="(newSong,i) in remdNewSongs" :key="i" @click="toPlayer(newSong.id,remdNewSongs,i)">
                        <div class="news_boxl">
                            <div class="news_name">{{newSong.name}}</div>
                            <div class="news_dec"><span v-for="(n,index) in newSong.song.artists" :key="index">{{n.name}}</span> - {{newSong.song.album.name}}</div>
                        </div>
                        <div class="news_boxr">
                            <i class="iconfont icon-bofang"></i>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="bottomImg">
            <img :src="logo" alt="">
        </div>
    </div>
</template>

<script>
    /* eslint-disable */
    // 输出
    export default {
        mounted(){
          // 请求轮播
          this.axios.get("banner?timestamp=222").then( (res)=>{
              console.log("轮播图数据",res.data.banners);
              this.banners = res.data.banners
          });
          this.axios.get("personalized?timestamp=222").then((res)=>{
              console.log("推荐歌单数据",res.data.result);
              this.remdSongs = res.data.result
          });
          this.axios.get("personalized/newsong?timestamp=222").then((res)=>{
                console.log("最新音乐数据",res.data.result);
                this.remdNewSongs = res.data.result;
          });
        },
        data(){
            return{
                banners:[],
                remdSongs:[],
                remdNewSongs:[],
                logo:"./static/logo.png"
            }
        },
        methods:{
            playCounts(num){
                var num1 = ((Math.ceil(num/1000))/10);
                if(Math.floor(num1 / 10) == 0){
                    return Math.floor(num);
                }
                else {
                    return num1 + "万"
                }
            },
        },
    }

</script>

<style scoped lang="scss">
    #home{
        width: 100%;
        .mint-swipe{
            height: 46vw;
            margin-top: 9vw;
            img{
                width: 100%;
            }
        }
        .remd{
            background-color: #fcfcfd;
        }
        .remd_title{
            text-align: left;
            padding-left: 10px;
            margin: 14px 0;
            font-size: 17px;
            line-height: 20px;
            border-left: 2px solid #d33c33;
            font-weight: 400;
        }
        .remd_songs{
            position: relative;
            padding-bottom: 20px;
            .songs_ul{
                width: 100%;
                min-height: 90vw;
                .songs_li{
                    display: block;
                    float: left;
                    width: 33.3%;
                    padding: 0 1px 16px;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    .sbox_top{
                        position: relative;
                        width: 100%;
                        min-height:33vw;
                        img{
                            position: absolute;
                            width: 100%;
                            left: 0;
                            top: 0;
                            z-index: 1;
                            vertical-align: middle;
                        }
                        span{
                            position: absolute;
                            right: 5px;
                            top: 2px;
                            z-index: 3;
                            padding-left: 13px;
                            color: #fff;
                            font-size: 12px;
                            text-shadow: 1px 0 0 rgba(0,0,0,.15);
                            i{
                                font-size: 12px;
                            }
                        }
                    }
                    .sbox_bottom{
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -moz-box-orient: vertical;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-align: left;
                        padding: 6px 2px 0 6px;
                        line-height: 1.2;
                        font-size: 13px;
                        height: 30px;
                    }
                }
            }
        }
        .remd_news{
            .remd_newsg{
                position: relative;
                min-height: 20px;
                .news_box{
                    position: relative;
                    display: block;
                    color: #333;
                    padding: 0 10px 6px;
                    .news_boxl{
                        text-align: left;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #ccc;
                        .news_name{
                            font-size: 17px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            word-break: normal;
                        }
                        .news_dec{
                            font-size: 12px;
                            color: #888;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            word-break: normal;
                            span:not(:last-child)::after{
                                content: " / ";
                                text-decoration: none;
                            }
                        }
                    }
                    .news_boxr{
                        color: #888;
                        position: absolute;
                        top: 2vw;
                        right: 5vw;
                        i{
                            font-size: 26px;
                        }
                    }
                }
            }
        }
        .bottomImg{
            margin-top: 20px;
        }
    }

</style>